<template>
    <div class="page coach-page ">
        <div class="banner">
            <div class="banner-image" style="background-image: url('./images/coach_training_banner.jpg')"></div>
        </div>
        <div class="content event-detail">
            <div class="tabs" style="margin-top: 0;">
                <div class="training-content-header">
                    <span>赛事报名</span>
                    <div class="training-content-line"></div>
                </div>

                <el-form inline label-width="150px" style="width:400px;margin:0 auto" size="medium" :model="dataForm"
                         :rules="rules" ref="ruleForm">
                    <el-form-item label="参赛队伍">
                        <el-input v-model="dataForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="负责人姓名">
                        <el-input v-model="dataForm.leaderName"></el-input>
                    </el-form-item>

                    <el-form-item label="身份证号码">
                        <el-input v-model="dataForm.leaderNo"></el-input>
                    </el-form-item>

                    <el-form-item label="联系方式">
                        <el-input v-model="dataForm.leaderPhone"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱">
                        <el-input v-model="dataForm.mail"></el-input>
                    </el-form-item>

                    <el-form-item label="微信号">
                        <el-input v-model="dataForm.weChatNo"></el-input>
                    </el-form-item>

                    <el-form-item label="第二联系人姓名">
                        <el-input v-model="dataForm.twoLeaderName"></el-input>
                    </el-form-item>
                    <el-form-item label="第二联系人手机号">
                        <el-input v-model="dataForm.twoLeaderPhone"></el-input>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item>
                        <el-button type="primary" @click="onSumbit">确定</el-button>
                    </el-form-item>
                </el-form>
                <el-dialog
                        title="支付"
                        :visible.sync="ispay"
                        width="70%">
                    <paysaishi :url="url" :id="dataForm.matchId" :matchsOnly="dataForm.matchsOnly" type="1"
                               :money="dataForm.money" :ispay="ispay"
                               @paysuccess="paysuccess"></paysaishi>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import {isNumber} from '../../utils/utils'
    import paysaishi from '@/components/pay/paysaishi';
    import PlatformCrumb from "@/components/PlatformCrumb.vue";

    export default {
        components: {
            PlatformCrumb,
            paysaishi
        },
        data() {
            return {
                key: "value",
                dialog: false,
                ispay: false,
                url: '',
                dataForm: {
                    matchsOnly: Date.parse(new Date()),
                    matchId: parseInt(this.$route.query.id)
                },

                rules: {
                    leaderNo: [
                        {validator: isNumber, trigger: 'blur'}
                    ]
                }
            }
        },

        methods: {
            ...mapActions('eventInformation', [
                'matchSignUp'
            ]),

            paysuccess() {
                this.ispay = false
                this.$router.back()
            },

            checkForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.dialog = true
                    } else {
                        return false
                    }
                })
            },
            // 提交报名，并获取二维码所需链接
            onSumbit() {
                this.matchSignUp(this.dataForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.ispay = true
                        this.url = res.data.url
                        console.log(this.url);
                    }
                })
            }
        }
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");
</style>
